<template>
    <view class="content">
		<view class="inner">
			<!-- 收货地址信息 -->
			<view class="addr-info" @tap="selectAddr()">
				<view class="top">
					<view class="left">
						<u-icon name="map-fill" size="40" color="#FFD426"></u-icon>
						<view class="detail" v-if="!addressInfo.name">
							<text class="add-addr">添加收货地址</text>
						</view>
						<view class="detail" v-else>
							<view class="user">
								<text class="name">{{ addressInfo.name }}</text>
								<text class="phone">{{ addressInfo.phone }}</text>
							</view>
							<view class="addr">
								<text class="areaName">{{ addressInfo.areaName }}</text>
								<text class="address">{{ addressInfo.address }}</text>
							</view>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				
				<view class="rhombus-list">
					<view class="rhombus" v-for="i in 13"></view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="top">
					<view class="img-box">
						<image class="image" :src="goodsInfo.pic"></image>
						<view class="group-number">{{ goodsInfo.groupUserNumber || '' }}人团</view>
						<view class="new-person" v-if="goodsInfo.newPerson === 1">新人专享</view>
					</view>
					<view class="goods-content">
						<view class="goods-name">{{ goodsInfo.title }}</view>
						<view class="deserved-money">未拼中奖励{{ goodsInfo.deservedMoney }}元红包</view>
						<view class="price">
							<view class="group-price">拼团价<text class="symbol">¥<text class="text">{{ goodsInfo.groupPrice }}</text></text></view>
							<view class="end-price">¥{{ goodsInfo.price }}</view>
						</view>
					</view>
				</view>
				<view class="center">
					<view class="item"><text>数量：</text><text>1件</text></view>
					<view class="item"><text>运费：</text><text>免运费</text></view>
					<view class="item"><text>商品总价：</text><text>¥{{ goodsInfo.groupPrice || 0 }}</text></view>
					<view class="item"><text>余额抵扣：</text><text>¥{{ parseFloat(userInfo.balance || 0) - parseFloat(goodsInfo.groupPrice || 0) > 0 ? goodsInfo.groupPrice || 0 : userInfo.balance || 0 }}</text></view>
					<view class="item"><text>微信支付：</text><text>¥{{ parseFloat(userInfo.balance || 0) - parseFloat(goodsInfo.groupPrice || 0) > 0 ? '0.00' : parseFloat(goodsInfo.groupPrice || 0) - parseFloat(userInfo.balance || 0) }}</text></view>
				</view>
				<view class="bottom">实付金额：<text class="symbol">¥<text class="text">{{ goodsInfo.groupPrice }}</text></text></view>
			</view>
		</view>
		
		<!-- 底部固定栏 -->
		<view class="footer-bar">
			<button class="btn join" @tap="onPayWay()">参加拼团</button>
		</view>
    </view>
</template>

<script>
	import { mapGetters } from 'vuex';
    export default {
        name: "settlement",
		data() {
			return {
				options: {},
				goodsInfo: {},
				addressInfo: {}
			}
		},
		onLoad(options) {
			this.options = options;
			if (uni.getStorageSync('token')) {
				this.$store.dispatch('getUserInfo');
			}
		},
		onShow() {
			this.initPage();
			
			// 接收选择地址
			let params = {};
			if (uni.getStorageSync('addressInfo')) {
				this.addressInfo = uni.getStorageSync('addressInfo')
				
				uni.removeStorageSync('addressInfo');
			} else {
				// 获取默认收货信息
				this.$service.order.address.defaultAddr({
					...params,
				}).then(res => {
					this.addressInfo = res;
				});
			}

			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_pintuanqr');
			// #endif
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			// 初始化页面
			initPage() {
				uni.showLoading({
					title: '加载中...'
				})
				// 获取商品详情
				this.$service.shopping.goods.info({
					id: this.options.gid
				}).then(res => {
					this.goodsInfo = res;
					uni.hideLoading();
				})
			},
			// 选择收货地址
			selectAddr() {
				uni.navigateTo({
					url: '/pages/member/addressList'
				})
			},
			// 校验支付方式
			onPayWay() {
				let that = this;
				if (!this.addressInfo || !this.addressInfo.id) {
					uni.showToast({
						title: '请先添加收货地址',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				});
				// 参团前消息订阅
				this.$service.common.base.settings().then(res => {
					uni.requestSubscribeMessage({
						tmplIds: res.templateId.split(','),
						complete () {
							if (parseFloat(that.userInfo.balance) >= parseFloat(that.goodsInfo.groupPrice)) {
								that.joinGroup();
							} else {
								// 计算支付差价
								let price = parseFloat(that.goodsInfo.groupPrice) - parseFloat(that.userInfo.balance);
								that.$service.order.wechat.pay({
									price: price
								}).then(res => {
									// 唤起微信支付
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.timeStamp,
										nonceStr: res.nonceStr,
										package: res.package,
										signType: res.signType,
										paySign: res.paySign,
										success: function (payRes) {
											if (payRes.errMsg === 'requestPayment:ok') {
												that.joinGroup();
												that.$store.dispatch('getUserInfo');
											}
										},
										fail: function (err) {
											if (err.errMsg === 'requestPayment:fail cancel') {
												uni.showToast({
													title: '用户取消支付',
													icon: 'none'
												})
											} else {
												uni.showToast({
													title: '支付失败',
													icon: 'none'
												})
											}
											uni.hideLoading();
											// #ifdef MP-WEIXIN
											uni.reportAnalytics('click_zhifusb_pt');
											// #endif
										}
									});
								});
							}
						}
					});
				});
			},
			// 参与拼团
			joinGroup() {
				let params = {
					combinationId: this.options.gid,
					addressId: this.addressInfo.id
				};
				if (this.goodsInfo.newPerson === 1) {
					this.$service.order.combination.newpersonRights(params).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '恭喜您，参团成功',
							icon: 'none'
						});
						// #ifdef MP-WEIXIN
						uni.reportAnalytics('click_zhifucg_pt');
						// #endif
						
						uni.navigateTo({
							url: '/pages/group/detail?gid=' +  this.options.gid
						})
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
						// #ifdef MP-WEIXIN
						uni.reportAnalytics('click_zhifusb_pt');
						// #endif
					})
				} else {
					this.$service.order.combination.add(params).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '恭喜您，参团成功',
							icon: 'none'
						});
						// #ifdef MP-WEIXIN
						uni.reportAnalytics('click_zhifucg_pt');
						// #endif
						
						uni.navigateTo({
							url: '/pages/group/detail?gid=' +  this.options.gid
						})
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
						// #ifdef MP-WEIXIN
						uni.reportAnalytics('click_zhifusb_pt');
						// #endif
					})
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx 0;
	.inner {
		padding: 0 20rpx;
		.addr-info {
			padding: 30rpx 36rpx;
			background: #fff;
			border-radius: 16rpx;
			position: relative;
			.top {
				@include flexBox(space-between, center);
				.left {
					@include flexBox(flex-start, center);
					.detail {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #2B2C2E;
						.user {
							margin-bottom: 6rpx;
							.phone {
								margin-left: 20rpx;
							}
						}
						.addr {
							color: #78797A;
							font-size: 24rpx;
						}
					}
				}
			}
			
			.rhombus-list {
				position: absolute;
				bottom: 0;
				left: 0;
				@include flexBox(flex-start, center);
				.rhombus {
				    width: 40rpx;
				    height: 8rpx;
				    transform: rotateZ(10deg)skew(-10deg, -10deg);
					margin-left: 14rpx;
					background: $main-color-text;
					&:nth-child(2n) {
						background: #5B6FDA;
					}
				}
			}
		}
		.order-info {
			padding: 0 20rpx;
			margin-top: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			.top {
				width: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				border-bottom: 2rpx solid #EDEDED;
				@include flexBox(center, flex-start);
				.img-box {
					width: 224rpx;
					height: 224rpx;
					position: relative;
					margin-right: 20rpx;
					border-radius: 16rpx;
					overflow: hidden;
					.image {
						position: absolute;
						width: 100%;
						height: 100%;
					}
					.group-number {
						position: absolute;
						background: $main-color;
						bottom: 0;
						left: 0;
						padding: 4rpx 12rpx;
						border-radius: 0 16rpx 0 16rpx;
						color: #333333;
						font-size: 26rpx;
					}
					.new-person {
						position: absolute;
						background: $main-color-text;
						bottom: 0;
						left: 0;
						padding: 4rpx 12rpx;
						border-radius: 0 16rpx 0 16rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}
				.goods-content {
					flex: 1;
					overflow: auto;
					height: 224rpx;
					@include flexBox(space-between, flex-start, column);
					.goods-name {
						font-size: 28rpx;
						color: #333333;
						font-weight: 600;
						@include ellipsis(2);
					}
					.deserved-money {
						background: #FFF0F2;
						color: $main-color-text;
						padding: 6rpx 22rpx;
						border-radius: 50rpx;
						font-size: 26rpx;
					}
					.price {
						color: #9A9A9A;
						@include flexBox(flex-start, flex-end);
						.group-price {
							font-size: 24rpx;
							.symbol {
								font-size: 28rpx;
								color: $main-color-text;
								.text {
									font-size: 38rpx;
									margin-right: 16rpx;
									font-weight: 600;
								}
							}
						}
						.end-price {
							color: #9A9A9A;
							font-size: 22rpx;
							text-decoration: line-through;
						}
					}
				}
			}
			.center {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #EDEDED;
				.item {
					font-size: 28rpx;
					color: #2B2C2E;
					margin-bottom: 14rpx;
					@include flexBox(space-between, center);
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			.bottom {
				padding: 24rpx 0;
				font-size: 24rpx;
				color: #78797A;
				@include flexBox(flex-end, center);
				.symbol {
					color: $main-color-text;
					.text {
						font-size: 32rpx;
					}
				}
			}
		}
	}
	.footer-bar {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		background: #fff;
		padding: 10rpx 24rpx;
		@include flexBox(center);
		.btn {
			width: 100%;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: 600;
			&::after {
				border: none;
			}
			&.join {
				background: $main-color;
				color: #333333;
			}
		}
	}
}
</style>